<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac" style="width: 280px;">
        <p class="label font14 text_black">{{$t('商户单号')}}：</p>
        <el-input v-model="order_id" :placeholder="$t('请输入商户单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac" style="width: 300px;">
        <p class="label font14 text_black">{{$t('信用分单号')}}：</p>
        <el-input v-model="trade_no" :placeholder="$t('请输入信用分单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac">
        <p class="label font14 text_black">{{$t('会员号')}}：</p>
        <el-input v-model="member_id" :placeholder="$t('请输入会员号')"></el-input>
      </div>
      
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black">{{$t('客户端')}}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black">{{$t('订单状态')}}：</p>
        <el-select
          v-model="orderStatusVal"
          :placeholder="$t('请选择')"
          @change="orderStatusChange"
        >
          <el-option
            v-for="item in orderStatusArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="ipt_box u-f u-f-ac" style="width: 160px" v-show="orderStatusVal == 'complate'">
        <p class="label font14 text_black">{{$t('年份')}}：</p>
        <el-date-picker
          style="width: 100px"
          v-model="year"
          type="year"
          value-format="yyyy"
          :placeholder="$t('选择年')">
        </el-date-picker>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
        {{$t('提交')}}
      </button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="order_no"
          :label="$t('商户单号')"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="trade_no"
          :label="$t('服务单号')"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="member_id"
          :label="$t('会员号')"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="auth_time"
          :label="$t('授权时间')"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="status_text"
          :label="$t('支付状态')"
        ></el-table-column>
        <el-table-column prop="nick" :label="$t('用户名称')"></el-table-column>
        <el-table-column
          prop="app_name"
          :label="$t('客户端')"
        ></el-table-column>
        
        <!-- <el-table-column :label="$t('操作')" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handlePay(scope.row)">{{$t('转支付')}}</el-button>
            <el-button size="mini" type="danger" @click="handleRevoke(scope.row)">{{$t('撤销')}}</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div class="pagination_box ">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <refresh @click="handleRefresh"></refresh>

  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import { mapState } from 'vuex'
export default {
  name: 'order-authList',
  data() {
    let that = this
    return {
      page: 1,
      page_size: 20,
      total: 0,
      order_id: "",
      member_id: "",
      trade_no: '',
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t('选择客户端')
        },
        {
          value: 1,
          label: that.$t('微信小程序')
        },
        {
          value: 2,
          label: that.$t('支付宝小程序')
        }
      ],
      orderStatusVal: 'active',
      orderStatusArr: [
        {
          value: 'active',
          label: that.$t('未完成'),
        },
        {
          value: 'complate',
          label: that.$t('已完成'),
        },
      ],
      year: '2020',
      tableData: [],
    };
  },
  computed: {
    ...mapState(['permissions'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.order_id = ''
      this.member_id = ''
      this.clientVal = 0
      this.trade_no = ''
      this.orderStatusVal = 'active'
      this.year = '2020'
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util.$http('/order/authList?page=' + this.page, {
        page_size: this.page_size,
        order_no: this.order_id,
        member_id: this.member_id,
        app_type: this.clientVal,
        trade_no: this.trade_no,
        status: this.orderStatusVal,
        year: this.year
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    clientChange(val) {
      this.clientVal = val;
    },
    orderStatusChange(val) {
      this.orderStatusVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
    handlePay(row) {

    },
    handleRevoke(row) {
      
    },
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
